<template>
    <view class="charts-box">
        <qiun-data-charts
            :canvas2d="true"
            type="column"
            :opts="opts"
            :chartData="chartOption"
        />
    </view>
</template>

<script>
export default {
    props: {
        chartData: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            chartOption: {},
            opts: {
                // 只更新数据不重新渲染图表
				update: true,
                duration: 0,
                animation: false,
                canvasId: '',
                canvas2d: true,
                color: ["#1890FF","#19be6b","#ff9900"],
                padding: [15,15,0,15],
                enableScroll: false,
                legend: {},
                xAxis: {
                    disableGrid: true,
                    axisLineColor: '#e8eaec'
                },
                yAxis: {
                    data: [
                        {
                            min: 0,
                            axisLineColor: '#e8eaec'
                        }
                    ],
                    gridColor: '#f8f8f9'
                },
                extra: {
                    column: {
                        type: "group",
                        width: 40,
                        activeBgColor: "#000000",
                        activeBgOpacity: 0.08
                    }
                }
            }
        };
    },
    methods: {
        updateChartData() {
            let option = {
                categories: this.chartData ? this.chartData.map(x => {
                    let str = x.ifCurrentShift ? `当班(${x.shiftName})` : `上一班(${x.shiftName})`;
                    return str;
                }) : [],
                series: [
                    {
                        name: "标准",
                        data: this.chartData ? this.chartData.map(x => Number((x.theoryQty).toFixed(1))) : []
                    },
                    {
                        name: "实际",
                        data: this.chartData ? this.chartData.map(x => Number((x.shiftQty).toFixed(1))) : []
                    },
                    {
                        name: "亏欠",
                        data: this.chartData ? this.chartData.map(x => Number((x.owingQty).toFixed(1))) : []
                    }
                ]
            };
            this.chartOption = JSON.parse(JSON.stringify(option));
        }
    },
    watch: {
        chartData: {
            handler() {
                this.updateChartData();
            },
            deep: true
        }
    }
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
    width: 100%;
    height: 300px;
}
</style>
